<template>
  <section class="index">
    <div class="top" @click="open">
      <img :src="require('../assets/img/vipcard.png')" alt="">
    </div>
    <div class="top-nav">
      <router-link to="/" tag="a">
        <span>余额</span>
        <i>0</i>
      </router-link>
      <router-link to="/" tag="a">
        <span>积分</span>
        <i>0.00</i>
      </router-link>
      <router-link to="/" tag="a">
        <span>卡券</span>
        <i>0.00</i>
      </router-link>
    </div>
    <ul class="menu">
      <li v-for="(item,index) in menu" :key="index">
        <router-link :to="item.url">
          <div class="icon">
            <img :src="item.icon" alt="">
          </div>
          <span v-if="item.text">{{item.text}}</span>
        </router-link>
      </li>
    </ul>
    <mt-popup class="popup" v-model="show" popup-transition="popup-fade" :closeOnClickModal="true">
      <div class="avatar">
        <img :src="require('../assets/img/icons/avatar.png')" alt="">
      </div>
      <div class="content">
        <p>点击查看动态码</p>
        <div class="pic">
          <img :src="require('../assets/img/icons/code.png')" alt="">
        </div>
        <p>到点消费请出示此微会员卡！</p>
        <p>打开微信会员卡</p>
      </div>
      <button @click="show=false">关闭</button>
    </mt-popup>
  </section>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      menu: [
        {
          text: "个人资料",
          icon: require("~/assets/img/icons/icon1.png"),
          url: "/info"
        },
        {
          text: "在线充值",
          icon: require("~/assets/img/icons/icon2.png"),
          url: "/top-up"
        },
        {
          text: "消费汇总",
          icon: require("~/assets/img/icons/icon3.png"),
          url: "/comsume-collect"
        },
        {
          text: "消费明细",
          icon: require("~/assets/img/icons/icon4.png"),
          url: "/comsume-detail"
        },
        {
          text: "积分明细",
          icon: require("~/assets/img/icons/icon5.png"),
          url: "/integral-detail"
        },
        {
          text: "积分兑换",
          icon: require("~/assets/img/icons/icon6.png"),
          url: "/integral-exchange"
        },
        {
          text: "会员特权",
          icon: require("~/assets/img/icons/icon7.png"),
          url: "/vip-privilege"
        },
        {
          text: "会员卡详情",
          icon: require("~/assets/img/icons/icon8.png"),
          url: "/vip-card-detail"
        },
        { icon: require("~/assets/img/icons/more.png"), url: "/more" }
      ]
    };
  },
  methods: {
    open() {
      this.show = true;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~assets/scss/index.scss";
</style>
